<template>
	<view class="custom-tabs">
		<view
			class="custom-tabs-bar"
			v-for="(item, i) in data"
			:key="i"
			:class="{ active: i == active }"
			@click="changeTab(i)"
		>
			<text class="tabbar-text">{{ item.label }}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'

	// props 父-》子
	defineProps<{
		data: { label: string }[]
	}>()
	const active = ref(0)
	const changeTab = (i: number) => {
		active.value = i
		emit('change', i)
	}

	// 子-》父 父组件注册同名事件
	const emit = defineEmits<{
		(e: 'change', active: number): void
	}>()
</script>

<style lang="scss" scoped>
	// 自定义tabbar
	.custom-tabs {
		display: flex;
		position: relative;
		padding: 0 30rpx;
	}

	.custom-tabs-bar {
		height: 80rpx;
		line-height: 80rpx;
		color: #979797;
		margin-right: 30rpx;
		position: relative;

		&.active {
			color: #121826;
			font-weight: 900;
			border-bottom: 2px solid #2cb5a5;
			font-size: 40rpx;
		}
	}

	// active这个类的子元素 并且类名叫做 tabbar-text 文字就变大
	.active .tabbar-text {
		font-size: 40rpx;
		// font-size: 40rpx;
	}

	.tabbar-text {
		font-size: 30rpx;
		// font-size: 40rpx;
	}

	.custom-tabs-cursor {
		position: absolute;
		bottom: 3px;
		left: 20px;

		width: 20px;
		height: 2px;
		border-radius: 2px;
		background-color: #2cb5a5;
		transition: all 0.3s ease-out;
	}
</style>
